<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vuex</title>
  </head>
  <body>
    <div id="app">
        
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <script>
      //在Vue里有普通组件，也有功能性组件或者说函数式组件，无状态的，也没有实例，没有响应式数据，没有方法
      Vue.component("functional-component", {
        props: ["style", "id"],
        inject: ["age"],
        functional: true, //表示这是一个函数式组件
        //data methods computed....都没有
        render(createElement, context) {
          console.log(context);
          return createElement("div", context.data, 'hello');
        },
      });
      var vm = new Vue({
        el: "#app",
        provide: { age: 18 },
        template: `<div><functional-component id="100" :style="{backgroundColor:'green'}"></functional-component></div>`,
      });
      /**
       * data 传递给组件的数据对象 vm.$data
        injections 如果使用了inject选项，此对象包含被 注入的属性 provide inject
        listeners 如果组件的上包含原生的监听器
        parent  对父组件的引用
        props 指的就是属性对象scopedSlots
        scopedSlots
        slots
        */
    </script>
  </body>
</html>
